<!-- 人员基础管理页面 -->
<template>
    <div>
        <el-row class="text-left">
            <div class="dlblock-mb20" v-if="false">
                <span class="pr5">人员ID</span>
                <el-input v-model.trim="id" size="medium" placeholder="请输入人员ID" style="width: 150px;" :maxlength="10"
                          show-word-limit clearable></el-input>
            </div>
            <div class="dlblock-mb20">
                <span class="pr5 ml10">姓名</span>
                <el-input v-model.trim="name" size="medium" placeholder="请输入姓名" style="width: 150px;" :maxlength="10"
                          show-word-limit clearable></el-input>
            </div>
            <div class="dlblock-mb20">
                <span class="pr5 ml10">性别</span>
                <el-select v-model="sex" class="w150" clearable>
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                </el-select>
            </div>
            <div class="dlblock-mb20">
                <span class="pr5 ml10">分组</span>
                <el-input v-model.trim="group" size="medium" placeholder="请输入分组" style="width: 150px;" show-word-limit
                          clearable></el-input>
            </div>
            <div class="dlblock-mb20 pr5 pl5">
                <el-button
                        @click="
						pages.page = 1;
						getPersonPageFn();"
                        class="el-icon-search ml5"
                        circle
                ></el-button>
            </div>
            <div class="dlblock-mb20 pr10 ml20">
                <el-button type="primary" @click="editBtn(1)">添加</el-button>
            </div>
            <div class="dlblock-mb20 pr10">
                <el-button type="danger" @click="delBtn">删除</el-button>
            </div>
            <div class="dlblock-mb20 pr10">
                <el-button @click="downloadBtn">导出列表</el-button>
            </div>
            <div class="dlblock-mb20 pr10">
                <el-button @click="id=name=sex=group='';getPersonPageFn();">重置</el-button>
            </div>
        </el-row>

        <el-table
                class="my-table"
                :data="tableData" stripe
                v-loading="loading"
                :header-row-class-name="'my-table-header'"
                @selection-change="handleSelectionChange"
                @row-dblclick="choseRow($event)"
                ref="myTable"
                border>
            <el-table-column type="selection" fixed width="55"></el-table-column>
            <el-table-column align="center" prop="personId" label="人员ID" v-if="false"></el-table-column>
            <el-table-column align="center" prop="personName" label="姓名"></el-table-column>
            <el-table-column align="center" prop="personCode" label="人员编码"></el-table-column>
            <el-table-column align="center" prop="orgName" label="分组"></el-table-column>
            <el-table-column align="center" prop="sex" label="性别"></el-table-column>
            <el-table-column align="center" prop="brithdayString" label="生日"></el-table-column>
            <el-table-column align="center" prop="postalCode" label="邮政编码"></el-table-column>
            <el-table-column align="center" prop="email" label="电子邮件"></el-table-column>
            <el-table-column align="center" prop="workUnit" label="工作单位"></el-table-column>
            <el-table-column align="center" prop="address" label="地址"></el-table-column>
            <el-table-column align="center" prop="mobileTel" label="手机电话"></el-table-column>
            <el-table-column align="center" prop="officeTel" label="办公室电话"></el-table-column>
            <el-table-column align="center" prop="homeTel" label="家庭电话"></el-table-column>
            <el-table-column align="center" label="操作" fixed="right">
                <template slot-scope="{ row }">
                    <el-button type="text" @click="editBtn(2, row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="my-pagination">
            <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :total="pages.total"
                    :page-size="pages.size"
                    :current-page="pages.page"
                    @current-change="pageChange"
            ></el-pagination>
        </div>

        <el-dialog :title="`人员管理-${editData.add == 1 ? '添加' : '编辑'}`" :visible.sync="editData.modal" width="600px"
                   :close-on-click-modal="false" v-dialogDrag>
            <el-form :model="editData" label-width="80px" ref="editForm">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="分组" prop="orgId" :rules="required">
                            <el-cascader
                                    v-model="editData.orgId"
                                    :options="groupTree"
                                    :props="{ value: 'orgId', label: 'orgName', checkStrictly: true }"
                                    style="width: 200px;"
                                    :show-all-levels="false"
                                    filterable
                            ></el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="姓名" prop="personName" :rules="required">
                            <el-input v-model="editData.personName" placeholder="请输入姓名" :maxlength="10" show-word-limit
                                      clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="人员编码" prop="parentId">
                            <el-input v-model="editData.personCode" placeholder="请输入人员编码" :maxlength="20"
                                      show-word-limit clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="性别" prop="orgName">
                            <el-select v-model="editData.sex">
                                <el-option label="男" value="男"></el-option>
                                <el-option label="女" value="女"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="生日" prop="parentId">
                            <el-date-picker style="width: 200px;" v-model="editData.birthday" value-format="yyyy-MM-dd"
                                            type="date" placeholder="选择日期"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="邮政编码" prop="orgName">
                            <el-input v-model="editData.postalCode" placeholder="请输入邮政编码" :maxlength="6" show-word-limit
                                      clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-form-item label="电子邮件" prop="parentId">
                        <el-input v-model="editData.email" placeholder="请输入电子邮件" :maxlength="30" show-word-limit
                                  clearable>

                        </el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="工作单位" prop="parentId">
                        <el-input v-model="editData.workUnit" placeholder="请输入工作单位" :maxlength="30" show-word-limit
                                  clearable></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="通讯地址" prop="parentId">
                        <el-input v-model="editData.address" placeholder="请输入通讯地址" :maxlength="30" show-word-limit
                                  clearable></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="手机电话" prop="parentId">
                            <el-input v-model="editData.mobileTel" type="number" placeholder="请输入手机号码"
                                      clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="办公电话" prop="orgName">
                            <el-input v-model="editData.officeTel" type="number" placeholder="请输入办公电话"
                                      clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="家庭电话" prop="parentId">
                            <el-input v-model="editData.homeTel" type="number" placeholder="请输入家庭电话"
                                      clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div slot="footer" class="text-center">
                <el-button @click="editData.modal = false">取消</el-button>
                <el-button type="primary" @click="editSave">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {getPersonPage, addPerson, setPerson, delPerson, getGroupTree} from '@/api';
    import {downloadToTagByA} from '@/utils/config';

    export default {
        name: 'Person',
        data() {
            return {
                required: {
                    required: true,
                    message: '此输入框必填',
                    trigger: 'blur'
                },
                id: '',
                name: '',
                sex: '',
                group: '',
                tableData: [],
                loading: false,
                pages: {
                    page: 1,
                    total: 0
                },
                tableSelection: [],
                editData: {
                    modal: false,
                    // 1添加 2编辑
                    add: 1,
                    id: '',
                    personCode: '',
                    personName: '',
                    orgId: [1024, 1025],
                    sex: '',
                    birthday: '',
                    postalCode: '',
                    email: '',
                    workUnit: '',
                    address: '',
                    mobileTel: '',
                    officeTel: '',
                    homeTel: ''
                },
                // 分组树
                groupTree: []
            };
        },
        created() {
            // this.getPageNum();
            // this.getPersonPageFn();
            // this.getGroupTreeFn();
        },
        destroyed: function () {
            this.keepPageNum();
        },
        methods: {
            choseRow(row) {//双击row函数
                if (row) {
                    this.$refs.myTable.toggleRowSelection(row);
                }
            },
            keepPageNum() {
                sessionStorage.setItem('PersonBasic', this.pages.page);
            },
            getPageNum() {
                var page = sessionStorage.getItem('PersonBasic');
                if (null != page) {
                    this.pages.page = parseInt(page);
                    sessionStorage.removeItem('PersonBasic');
                }
            },
            downloadBtn() {
                downloadToTagByA('/ba/org/person/export', {
                    token: sessionStorage.token,
                    pageNum: this.pages.page,
                    personName: this.name,
                    personId: this.id,
                    sex: this.sex,
                    orgName: this.group
                });
            },
            editSave() {
                this.$refs['editForm'].validate(valid => {
                    if (valid) {
                        if (this.editData.add == 1) {
                            addPerson({
                                personCode: this.editData.personCode,
                                personName: this.editData.personName,
                                orgId: this.editData.orgId[this.editData.orgId.length - 1],
                                sex: this.editData.sex,
                                birthday: this.editData.birthday,
                                postalCode: this.editData.postalCode,
                                email: this.editData.email,
                                workUnit: this.editData.workUnit,
                                address: this.editData.address,
                                mobileTel: this.editData.mobileTel,
                                officeTel: this.editData.officeTel,
                                homeTel: this.editData.homeTel
                            }).then(res => {
                                this.$message.success(res.data);
                                this.editData.modal = false;
                                this.getPersonPageFn();
                            });
                        } else {
                            setPerson({
                                personId: this.editData.id,
                                personCode: this.editData.personCode,
                                personName: this.editData.personName,
                                orgId: this.editData.orgId[this.editData.orgId.length - 1],
                                sex: this.editData.sex,
                                birthday: this.editData.birthday,
                                postalCode: this.editData.postalCode,
                                email: this.editData.email,
                                workUnit: this.editData.workUnit,
                                address: this.editData.address,
                                mobileTel: this.editData.mobileTel,
                                officeTel: this.editData.officeTel,
                                homeTel: this.editData.homeTel
                            }).then(res => {
                                this.$message.success(res.data);
                                this.editData.modal = false;
                                this.getPersonPageFn();
                            });
                        }
                    } else {
                        return false;
                    }
                });
            },
            getPersonPageFn() {
                this.loading = true;
                getPersonPage({
                    pageNum: this.pages.page,
                    personName: this.name,
                    personId: this.id,
                    sex: this.sex,
                    orgName: this.group
                }).then(res => {
                    this.tableData = res.data.list;
                    this.pages.total = res.data.count;
                }).finally(() => {
                    this.loading = false;
                });
            },
            rowDblclick(row) {
                this.editBtn(2, row);
            },
            editBtn(t, row) {
                function getTreeDeepArr(orgName, treeData) {
                    // 在递归时操作的数组
                    let arr = [];
                    // 存放结果的数组
                    let returnArr = [];
                    // 深度
                    let depth = 0;

                    return childrenEach(treeData, depth);

                    // 定义递归函数
                    function childrenEach(treeData, depthN) {
                        for (let j = 0; j < treeData.length; j++) {
                            depth = depthN;
                            arr[depthN] = (treeData[j].orgId);
                            if (treeData[j].orgName == orgName) {
                                returnArr = arr.slice(0, depthN + 1);
                                break
                            } else {
                                if (treeData[j].children) {
                                    depth++;
                                    childrenEach(treeData[j].children, depth);
                                }
                            }
                        }

                        return returnArr;
                    }
                }

                // 添加
                if (t == 1) {
                    this.editData = {
                        modal: true,
                        add: 1,
                        id: '',
                        personCode: '',
                        personName: '',
                        orgId: [],
                        sex: '',
                        birthday: '',
                        postalCode: '',
                        email: '',
                        workUnit: '',
                        address: '',
                        mobileTel: '',
                        officeTel: '',
                        homeTel: ''
                    };
                }
                // 编辑
                else {
                    // 获取分组默认值
                    let orgId = getTreeDeepArr(row.orgName, this.groupTree)
                    this.editData = {
                        modal: true,
                        add: 2,
                        id: row.personId,
                        personCode: row.personCode,
                        personName: row.personName,
                        orgId: orgId,
                        sex: row.sex,
                        birthday: row.birthday,
                        postalCode: row.postalCode,
                        email: row.email,
                        workUnit: row.workUnit,
                        address: row.address,
                        mobileTel: row.mobileTel,
                        officeTel: row.officeTel,
                        homeTel: row.homeTel
                    };
                }
            },
            delBtn() {
                if (this.tableSelection.length) {
                    this.$confirm('确认删除这些记录吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                        .then(() => {
                            delPerson({personIds: this.tableSelection.map(item => item.personId)}).then(res => {
                                this.$message.success(res.data);
                                this.getPersonPageFn();
                            });
                            this.getPageNum();
                            this.getPersonPageFn();
                            this.getGroupTreeFn();
                        })
                        .catch(() => {
                        });
                }
            },
            handleSelectionChange(val) {
                this.tableSelection = val;
            },
            pageChange(val) {
                this.pages.page = val;
                this.getPersonPageFn();
            },
            getGroupTreeFn() {
                getGroupTree().then(res => {
                    this.groupTree = res.data.children;
                });
            }
        }
    };
</script>

<style scoped></style>
